<template>
	<view class="category-page">
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-input">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<input class="input" type="text" placeholder="搜索商品" placeholder-style="color: #999;" />
			</view>
		</view>

		<!-- 分类内容 -->
		<view class="category-container">
			<!-- 左侧分类导航 -->
			<scroll-view scroll-y class="category-sidebar">
				<view v-for="(category, index) in categories" :key="index" class="category-sidebar-item"
					:class="{ active: activeCategory === index }" @click="changeCategory(index)">
					{{ category.name }}
				</view>
			</scroll-view>

			<!-- 右侧分类详情 -->
			<scroll-view scroll-y class="category-content">
				<!-- 分类Banner -->
				<view class="category-banner">
					<image mode="aspectFill" :src="currentCategory.banner" class="banner-image" />
				</view>

				<!-- 子分类列表 -->
				<template v-for="(subcategory, subIndex) in currentCategory.subcategories" :key="subIndex">
					<view class="subcategory-title">{{ subcategory.name }}</view>
					<view class="subcategory-grid">
						<view v-for="(item, itemIndex) in subcategory.items" :key="itemIndex" class="subcategory-item"
							@click="toList(item)">
							<view class="subcategory-icon">
								<image mode="aspectFill" :src="item.image" class="subcategory-image" />
							</view>
							<view class="subcategory-name">{{ item.name }}</view>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	const toList = (item) => {
		uni.navigateTo({
			url: `/pages/product/product_list?category=${item.name}`
		})
	}
	// 分类数据
	const categories = ref([{
			name: '家居生活',
			banner: 'https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
			subcategories: [{
					name: '厨房用品',
					items: [{
							name: '餐具',
							image: 'https://images.unsplash.com/photo-1590794056226-79ef3a8147e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80'
						},
						{
							name: '水杯',
							image: 'https://images.unsplash.com/photo-1584992236310-6edddc08acff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
						},
						{
							name: '锅具',
							image: 'https://images.unsplash.com/photo-1593784991095-a205069470b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
						},
						{
							name: '厨房小工具',
							image: 'https://images.unsplash.com/photo-1621844061203-3f9a452e8e54?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
						},
						{
							name: '保温杯',
							image: 'https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
						},
						{
							name: '烘焙工具',
							image: 'https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2013&q=80'
						}
					]
				},
				{
					name: '卧室用品',
					items: [{
							name: '枕头',
							image: 'https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80'
						},
						{
							name: '床品',
							image: 'https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80'
						},
						{
							name: '收纳盒',
							image: 'https://images.unsplash.com/photo-1616046229478-9901c5536a45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80'
						},
						{
							name: '香薰',
							image: 'https://images.unsplash.com/photo-1567225557594-88d73e55f2cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
						},
						{
							name: '装饰品',
							image: 'https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80'
						}
					]
				}
			]
		},
		{
			name: '美妆个护',
			banner: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
			subcategories: [
				// 美妆个护子分类数据...
			]
		},
	])

	const activeCategory = ref(0)

	// 当前选中的分类
	const currentCategory = computed(() => {
		return categories.value[activeCategory.value]
	})

	// 切换分类
	const changeCategory = (index) => {
		activeCategory.value = index
	}
</script>

<style lang="scss" scoped>
	.category-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.search-bar {
		padding: 12px;

		.search-input {
			background: #fff;
			border-radius: 20px;
			padding: 8px 16px;
			display: flex;
			align-items: center;

			.input {
				flex: 1;
				margin-left: 8px;
				font-size: 14px;
			}
		}
	}

	.category-container {
		display: flex;
		flex: 1;
		height: calc(100% - 60px);
	}

	.category-sidebar {
		width: 80px;
		background-color: #f5f5f5;

		&-item {
			padding: 15px 0;
			text-align: center;
			font-size: 13px;
			position: relative;

			&.active {
				background-color: #fff;
				color: #e4393c;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 3px;
					height: 16px;
					background-color: #e4393c;
				}
			}
		}
	}

	.category-content {
		flex: 1;
		padding: 15px;
	}

	.category-banner {
		width: 100%;
		height: 100px;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;

		.banner-image {
			width: 100%;
			height: 100%;
		}
	}

	.subcategory-title {
		font-size: 14px;
		font-weight: bold;
		margin: 15px 0 10px;
	}

	.subcategory-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.subcategory-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.subcategory-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 5px;

		.subcategory-image {
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}

	.subcategory-name {
		font-size: 12px;
	}
</style>